<template>
  <div class="form-valid-demo">
    <h3 class="title">三种排版以及验证</h3>
    <div>
      <d-form ref="form" :label-width="110" :mode="mode" :model="data" :rules="validationRules" :top="0.2" show-error-tip>
        <d-form-item single>
          <d-switch-list :datas="modeParam" v-model="mode" :small="true"></d-switch-list>
        </d-form-item>
        <d-form-item label="Input" prop="inputData">
          <input type="text" v-model="data.inputData" v-wordLimit="30" placeholder="只能输入15，限制输入30个字" />
          <template slot="error" slot-scope="props">
            <!-- *type*: base, combine, async -->
            <span class="link" v-if="props.type === 'async'" @click="open">
              +++++++自定义的错误提示+++++++
            </span>
          </template>
        </d-form-item>
        <d-form-item label="Integer" prop="intData">
          <d-slider v-model="data.intData"></d-slider>
        </d-form-item>
        <d-form-item label="Integer" prop="intData">
          <d-number-input v-model="data.intData" :min="0" :max="100"></d-number-input>
        </d-form-item>
        <d-form-item label="readonly" readonly>
          只读数据
        </d-form-item>
        <d-form-item label="Digital" prop="numberData">
          <d-number-input type="text" v-model="data.numberData"></d-number-input>
        </d-form-item>
        <d-form-item label="Mail" prop="emailData">
          <input type="text" v-model="data.emailData" />
        </d-form-item>
        <d-form-item label="URL" prop="urlData">
          <input type="text" v-model="data.urlData" />
        </d-form-item>
        <d-form-item label="Cellphone" prop="telData">
          <input type="text" v-model="data.telData" />
        </d-form-item>
        <d-form-item label="Phone" prop="mobileData">
          <input type="text" v-model="data.mobileData" />
        </d-form-item>
        <d-form-item label="Amount" :required="true" single>
          <div class="d-input-group">
            <div class="d-input-addon">
              <d-select v-model="data.select1Data" :datas="param1" :no-border="true" :null-option="false"></d-select>
            </div>
            <d-form-item prop="money.minData" label="起始金额" :show-label="false">
              <input type="text" v-model="data.money.minData" placeholder="起始金额" />
            </d-form-item>
            <span class="d-input-addon">-</span>
            <d-form-item prop="money.maxData" label="结束金额" :show-label="false">
              <input type="text" v-model="data.money.maxData" placeholder="结束金额" />
            </d-form-item>
            <span class="d-input-addon">K</span>
          </div>
        </d-form-item>
        <d-form-item label="Select" prop="select2Data">
          <d-select v-model="data.select2Data" dict="simple"></d-select>
        </d-form-item>
        <d-form-item label="Tags" prop="tagInputData">
          <d-tag-input v-model="data.tagInputsData"></d-tag-input>
        </d-form-item>
        <d-form-item label="Multiple" prop="select3Data">
          <d-select v-model="data.select3Data" dict="simple" :multiple="true"></d-select>
        </d-form-item>
        <d-form-item label="Date" ref="datepicker" prop="dateData">
          <d-date-picker v-model="data.dateData"></d-date-picker>
        </d-form-item>
        <d-form-item label="Score" prop="rateData">
          <d-rate v-model="data.rateData" :show-text="true"></d-rate>
        </d-form-item>
        <d-form-item label="Textarea" prop="textareaData" :single="true">
          <textarea rows="3" v-autosize v-wordcount="50" v-model="data.textareaData"></textarea>
        </d-form-item>
        <d-form-item label="Single" prop="radioData">
          <d-radio v-model="data.radioData" :datas="dataParam"></d-radio>
        </d-form-item>
        <d-form-item label="Multiple" prop="checkboxData">
          <d-checkbox v-model="data.checkboxData" :datas="dataParam"></d-checkbox>
        </d-form-item>
        <d-form-item label="Fuzzy" prop="autocompleteData">
          <d-auto-complete v-model="data.autocompleteData" config="simple"></d-auto-complete>
        </d-form-item>
        <!--
          这里定义的required属性同样适用于验证规则中
        -->
        <d-form-item label="Custom" prop="thingsData[0]" required>
          <input type="text" v-model="data.thingsData[0]" />
        </d-form-item>
        <div>
          <d-form-item
            v-for="(item, index) of data.inputsData" :key="index" :label="'Custom'+(index+1)"
            :prop="'inputsData['+index+'].value'"
          >
            <d-row type="flex">
              <d-col class="flex1">
                <input type="text" v-model="item.value" />
              </d-col>
              <d-col class="text-right" v-width="50">
                <d-poptip @confirm="remove(index)" content="确定删除？">
                  <d-button text-color="red" :no-border="true" icon="d-icon-trash"></d-button>
                </d-poptip>
              </d-col>
            </d-row>
          </d-form-item>
        </div>
        <d-form-item single>
          <d-button size="s" text-color="blue" @click="add">添加输入框</d-button>
        </d-form-item>
        <d-form-item :no-padding="true" single>
          <d-button color="primary" :loading="isLoading" @click="submit" v-tooltip content="执行异步验证但是不等待结果">提交</d-button>
          <i class="d-split"></i>
          <d-button color="green" :loading="isLoading" @click="submitAsync" v-tooltip content="等待所有异步验证都执行完才执行">异步提交</d-button>
          <i class="d-split"></i>
          <d-button @click="reset">清除验证</d-button>
          <d-button @click="resetDatepicker">清除日期的验证</d-button>
        </d-form-item>
      </d-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'formValidDemo',
  data () {
    return {
      mode: 'single',
      data: {
        intData: null,
        numberData: null,
        urlData: null,
        emailData: null,
        telData: null,
        mobileData: null,
        inputData: '',
        textareaData: '测试',
        radioData: 1,
        rateData: null,
        checkboxData: [1],
        select1Data: '人民币',
        select2Data: '',
        select3Data: [],
        taginputsData: [],
        autocompleteData: null,
        money: {
          minData: null,
          maxData: null
        },
        dateData: null,
        inputsData: [],
        thingsData: ['']
      },
      dataParam: {
        1: '男',
        2: '女',
        3: '其他'
      },
      param1: ['美金', '人民币', '卢布'],
      isLoading: false,
      modeParam: {
        single: '一个区块一行',
        twocolumn: '两列一行',
        threecolumn: '三列一行',
        block: '标题独立一行'
      },
      validationRules: {
        rules: {
          textareaData: {
            maxLen: 50,
            minLen: 10
          },
          inputData: {
            // 这里的判断不会影响最终的valid结果，所以也可以作为一些验证提示
            validAsync (value, next, parent, data) {
              console.log(value)
              setTimeout(() => {
                if (value === 15) {
                  next()
                } else {
                  next('ID不等于15')
                }
              }, 1000)
            }
          }
        },
        required: [
          'autocompleteData',
          'select2Data',
          'select3Data',
          'inputsData[].value',
          'inputData',
          'radioData',
          'rateData',
          'checkboxData',
          'moneyData',
          'dateData',
          'taginputsData',
          'money.minData',
          'money.maxData',
          'intData',
          'numberData',
          'urlData',
          'emailData',
          'telData',
          'mobileData',
          'textareaData'
        ],
        int: ['intData'],
        number: ['numberData', 'money.minData', 'money.maxData'],
        url: ['urlData'],
        email: ['emailData'],
        tel: ['telData'],
        mobile: ['mobileData'],
        combineRules: [{
          parentRef: 'money',
          refs: ['minData', 'maxData'],
          valid: {
            valid: 'lessThan',
            message: '起始金额不能大于结束金额'
          }
        }]
      }
    }
  },
  methods: {
    submit () {
      const validResult = this.$refs.form.valid()
      if (validResult.result) {
        this.$Message('验证成功')
      }
    },
    submitAsync () {
      this.isLoading = true
      this.$refs.form.validAsync().then(result => {
        if (result.result) {
          this.$Message('验证成功')
        }
        this.isLoading = false
      })
    },
    open () {
      this.$Modal({
        title: '处理',
        content: '我要去做特殊的处理'
      })
    },
    reset () {
      this.isLoading = false
      this.$refs.form.resetValid()
    },
    resetDatepicker () {
      this.$refs.datepicker.resetValid()
    },
    add () {
      this.data.inputsData.push({ value: '' })
    },
    remove (index) {
      this.data.inputsData.splice(index, 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .form-valid-demo
</style>
